<template>

	<view class="">
		<view style="margin-bottom: 30upx;" v-if="secKillActivityList.length > 0">

			<!-- <MmvTitle title="热门活动" :moreLink="activityLink"></MmvTitle>
			<view class="wrap">
				<view v-for="(item) in activityList" :key="item.activityId">
					<PopularActivities
					:activityType="item.activityType"
					:activityTitle="item.activityName"
					:applyCount="item.inventedSalesNumber"
					:isReferralBonuses = "item.isReferralBonuses"
					:finishTime="item.timeEnd"
					:activityId="item.activityId"
					:activityUrl="item.coverImage | imageUrl"
					></PopularActivities>
					</view>
			</view> -->


			<view class="content_bg">
				<image :src="ac_seckill_bg | imageUrl" style="height: 170upx;width: 100%;background-color: #f8e2d5;"
					mode="scaleToFill"></image>

				<view class="seckill_bg">

					<view class="ac_content" :style="{'background-image':'url('+ac_bg_dot+')'}"
						v-for="(item) in secKillActivityList" :key="item.activityId" @click="goSeckill(item)">

						<view style="padding: 20upx;">
							<image :src="item.coverImage | imageUrl" mode="scaleToFill"
								style="height: 220upx;width: 100%;border-radius: 15upx;"></image>
						</view>


						<view style="align-self: flex-end;margin-right: 20upx;display: flex;">
							<text style="font-size: 22upx;color: #333;">距离活动结束还有</text>
							<text
								style="font-size: 22upx;color: #009B01;font-weight: bold;margin-left: 19upx;">{{getDuritionTime(item.timeEnd)}}</text>
						</view>
						<view style="margin: 0 19upx 30upx;display: flex;justify-content: space-between;">
							<text style="font-size: 32upx;color: #333;font-weight: bold;">{{item.activityName}}</text>
							<text class="ac_btn">立即参加</text>
						</view>


					</view>


				</view>

			</view>
		</view>

		<view style="margin-bottom: 67upx;" v-if="peerActivityList.length > 0">

			<view class="content_bg">
				<image :src="ac_bg | imageUrl" style="height: 170upx;width: 100%;background-color: #E8E2FF;"
					mode="scaleToFill"></image>

				<view class="seckill_bg2">

					<view class="ac_content" :style="{'background-image':'url('+ac_bg_dot+')'}"
						v-for="(item) in peerActivityList" :key="item.activityId" @click="goPeer(item)">

						<view style="padding: 20upx;">
							<image :src="item.coverImage | imageUrl" mode="scaleToFill"
								style="height: 220upx;width: 100%;border-radius: 15upx;"></image>
						</view>


						<view style="align-self: flex-end;margin-right: 20upx;display: flex;">
							<text style="font-size: 22upx;color: #333;">距离活动结束还有</text>
							<text
								style="font-size: 22upx;color: #6A4BF1;font-weight: bold;margin-left: 19upx;">{{getDuritionTime(item.timeEnd)}}</text>
						</view>
						<view style="margin: 0 19upx 30upx;display: flex;justify-content: space-between;">
							<text style="font-size: 32upx;color: #333;font-weight: bold;">{{item.activityName}}</text>
							<text class="ac_btn2">立即参加</text>
						</view>


					</view>


				</view>

			</view>
		</view>



	</view>
</template>

<script>
	import MmvTitle from '@/components/layout/mmv-home-title.vue';
	// import PopularActivities from '@/components/card/popular-activities.vue';
	import {
		apiActivityList
	} from '../../../common/api.js';
	import GLOBAL_CONFIG from '@/common/config';
	import * as homeApi from '@/common/apis/home-api.js';

	export default {
		components: {
			MmvTitle,
			// PopularActivities
		},
		computed: {
			storeInfo() {
				this.getData();
				return this.$store.state.app.storeInfo;
			},
			isNotLogin() {
				return uni.$u.test.isEmpty(this.$store.state.user.userInfo) || uni.$u.test.isEmpty(this.$store.state.user.userInfo.phone);
			},
			deptId() {
			    return this.$store.state.user.deptId;
			},
		},
		data() {
			return {
				activityLink: '../../pages/activity/home-moreActivity',
				peerActivityList: [],
				secKillActivityList: [],
				timer: null,
				ac_seckill_bg: 'uni_rental/title-秒杀@2x.png',
				ac_bg: 'uni_rental/title-同行@2x.png',
				ac_bg_dot: this.baseImageUrl + 'uni_rental/点@2x.png',
			}
		},
		filters: {
			imageUrl(url) {
				return GLOBAL_CONFIG.yxBaseImageUrl + url;
			},
		},
		mounted() {
			// this.timer = setTimeout(() => {
			// 	this.getData();
			// }, 300);

			uni.$on('refreshActivityData', () => {
				this.getData();
			});
			this.getData();
			// uni.$on('store_selected', res => {		
			// })

			uni.$on('login', res => {
				this.getData();
			})

			// uni.$on('logout', res => {
			// 	this.getData();
			// })

		},
		methods: {
			async getData() {
				try {
					let result;
					// if (!this.isNotLogin && !uni.$u.test.isEmpty(this.$store.state.user.openid)) {
					if (!this.isNotLogin ) {
						result = await homeApi.indexlogin({
							deptId: this.deptId,
						});
					} else {
						result = await homeApi.indexnotlogin({
							deptId: this.deptId,
						});
					}

					this.peerActivityList = result.peerActivityList;
					this.secKillActivityList = result.seckillActivityList;
					// this.$store.commit('home/setAdvertList', result.advertList || []);
					// await this.serializeTabs(result.tabList);
					// await this.getTab(this.tabs[this.activeTab]);




				} catch (error) {
				}

				// apiActivityList({
				// 	tenantId: this.$store.state.user.tenantCode,
				// 	applicableUnitNo: this.$store.state.user.deptId,
				// 	pageNo: 1,
				// 	pageSize: 100,
				// }).then(res => {
				// 	this.activityList = res;
				// })
			},
			getDuritionTime(finishTime) {


				//获取当前时间的毫秒值
				var date = new Date();
				var timestap = date.getTime();
				//时间差
				var difftime = (finishTime * 1000 - timestap) / 1000;
				var days = parseInt(difftime / 86400); //天
				var hours = parseInt(difftime / 3600) - 24 * days; //时
				return days + '天' + hours + '小时';
			},

			goSeckill(item){
				uni.navigateTo({
					url:'/pages/activity/activityDetail-secondKill?bizNo=' + item.activityId
				})
			},

			goPeer(item){
				uni.navigateTo({
					url:'/pages/activity/activityDetail-peer?bizNo=' + item.activityId
				})
			}
		}

	};
</script>

<style lang="scss" scoped>
	.wrap {
		padding: $page_padding;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.content_bg {
		// padding: $page_padding;
		@include flex(column);
		margin-left: 21upx;
		margin-right: 21upx;
		border-radius: 14upx;
		box-sizing: border-box;
		box-shadow: 3upx 3upx 15upx #FBFBFB, -3upx -3upx 15upx #bfbfbf;
	}

	.seckill_bg {
		padding-bottom: 20upx;
		background: linear-gradient(to bottom, #f8e2d5, #F8E2D5FF, #FAFAFA);
	}

	.seckill_bg2 {
		padding-bottom: 20upx;
		background: linear-gradient(to bottom, #E8E2FF, #EBE6FF, #F7F5FF);
	}

	.ac_content {
		margin: 0 20upx 20upx;
		border-radius: 15upx;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		// background-image: url('@/static/mine/mine_order0.png');
		background-repeat: no-repeat;
		background-position: bottom left 3upx;
		background-size: 153upx 104upx;
	}

	.ac_btn {
		width: 140upx;
		height: 44upx;
		line-height: 44upx;
		text-align: center;
		font-size: 24upx;
		color: #fff;
		border-radius: 6upx;
		background: linear-gradient(to right, #A5D9A9, #7FCB82, #009B01);
		margin-top: 12upx;
		//box-shadow: -5upx 8upx 15upx #FDC5CE;
	}

	.ac_btn2 {
		width: 140upx;
		height: 44upx;
		line-height: 44upx;
		text-align: center;
		font-size: 24upx;
		color: #fff;
		border-radius: 6upx;
		background: linear-gradient(to right, #8B75EE, #6E4FF6, #532AFE);
		margin-top: 12upx;
		box-shadow: -5upx 8upx 15upx #D8D1FA;
	}
</style>
